<template>
  <div :class="'icon ' + size">
    <svg :class="icon" aria-hidden="true">
      <use :xlink:href="'#kf-' + icon"></use>
    </svg>
  </div>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

  @Component
  export default class TcIcon extends Vue{
    @Prop({ required: true })
    icon: string

    @Prop({ default: '' })
    size: string
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.icon{
  svg{
    width: 100%;
    height: 100%;
  }
}
</style>
